<template>
	<div>
		<el-form v-model="accountQueryForm" inline size="mini" style="text-align: left">
			<el-form-item>
				<el-button @click="getAccountListByPage" type="primary" >查询</el-button>
			</el-form-item>
			<el-form-item style="float: right">
				<el-button v-if="hasAuth('account:add')" @click="showAddAccountDialogHandler" type="primary" >新增</el-button>
			</el-form-item>
		</el-form>
		<el-dialog :visible.sync="showAccountDialog" v-if="showAccountDialog" fullscreen :modal="false">
			<el-form :model="account" label-width="130px" size="mini">
				<el-form-item label="账号">
					<el-input v-model="account.accountNumber"></el-input>
				</el-form-item>
				<el-form-item label="年龄">
					<el-input v-model="account.age"></el-input>
				</el-form-item>
				<el-form-item label="余额">
					<el-input v-model="account.balance"></el-input>
				</el-form-item>
				<el-form-item label="性别">
					<el-input v-model="account.gender"></el-input>
				</el-form-item>
				<el-form-item label="firstname">
					<el-input v-model="account.firstname"></el-input>
				</el-form-item>
				<el-form-item label="lastname">
					<el-input v-model="account.lastname"></el-input>
				</el-form-item>
				<el-form-item label="邮箱">
					<el-input v-model="account.email"></el-input>
				</el-form-item>
				<el-form-item label="职位">
					<el-input v-model="account.employer"></el-input>
				</el-form-item>
				<el-form-item label="所在城市">
					<el-input v-model="account.city"></el-input>
				</el-form-item>
				<el-form-item label="地址">
					<el-input v-model="account.address"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-input v-model="account.state"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="showAccountDialog = false">取消</el-button>
				<el-button @click="accountDialogConfirm()">确定</el-button>
			</div>
		</el-dialog>
		<el-table :data="accountList">
			<el-table-column prop="accountNumber" label="账号"></el-table-column>
			<el-table-column prop="age" label="年龄"></el-table-column>
			<el-table-column prop="balance" label="余额"></el-table-column>
			<el-table-column prop="gender" label="性别"></el-table-column>
			<el-table-column prop="firstname" label="firstname"></el-table-column>
			<el-table-column prop="lastname" label="lastname"></el-table-column>
			<el-table-column prop="email" label="邮箱"></el-table-column>
			<el-table-column prop="employer" label="职位"></el-table-column>
			<el-table-column prop="city" label="所在城市"></el-table-column>
			<el-table-column prop="address" label="地址"></el-table-column>
			<el-table-column prop="state" label="状态"></el-table-column>
			<el-table-column label="操作" width="150" v-if="hasAuth('account:update')||hasAuth('account:delete')">
				<template slot-scope="scope">
					<el-button class="el-icon-edit-outline" @click="showUpdateAccountDialogHandler(scope.$index, scope.row)" v-if="hasAuth('account:update')" type="primary" size="mini"></el-button>
					<el-button class="el-icon-delete-solid" @click="deleteAccount(scope.$index, scope.row)" v-if="hasAuth('account:delete')" type="danger" size="mini"></el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="sizeChangeHandle" @current-change="currentChangeHandle"
			layout="total, sizes, prev, pager, next, jumper" :current-page="currentPage"
			:page-sizes="[10,15,30,50]" :page-size="pageSize" :total="total">
		</el-pagination>
	</div>
</template>
<script>
	export default {
		name: "Account",
		data: function () {
			return {
				showAccountDialog: false,
				accountQueryForm: {},
				operationType: "",
				accountList: [],
				// 新增(新增前需要清空emp),编辑(需要将当前行赋值给emp),查询(与查询条件双向绑定)共用
				account: {},
				total: 0,
				currentPage: 1,
				pageSize: 10,
				sortInfo: null
			}
		},
		methods: {
			showUpdateAccountDialogHandler(index, row) {
				this.operationType = "update";
				this.account = row;
				this.showAccountDialog = true;
			},
			showAddAccountDialogHandler() {
				this.operationType = "add";
				this.account = {};
				this.showAccountDialog = true;
			},
			accountDialogConfirm() {
				if (this.operationType === "add") {
					this.addAccount()
				}
				if (this.operationType === "update") {
					this.updateAccount()
				}
				this.showAccountDialog = false;
			},
			async deleteAccount(index, row) {
				this.$confirm('确定要删除?', '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(() => {
					let url = `/account/account/` + row.accountNumber;
					this.ajax(url,null,'delete').then((res) => {
						if (res.success) {
							this.getAccountListByPage();
						}
					})
				}).catch(() => {
					 this.$message({type: 'info', message: '已取消删除'});
				});
			},
			addAccount() {
				let url = `/account/account/`;
				this.ajax(url, this.account, "POST").then(res => {
					if (res.success) {
						this.getAccountListByPage();
					}
				})
			},
			async updateAccount() {
				let url = `/account/account`;
				let res = await this.ajax(url, this.account, "put");
					if (res.success) {
						this.getAccountListByPage();
					}
			},
			// pageSize变动,触发重新从后台加载数据
			sizeChangeHandle(pageSize) {
				this.pageSize = pageSize;
				this.getAccountListByPage();
			},
			// currentPage变动,触发从后台加载数据
			currentChangeHandle(currentPage) {
				this.currentPage = currentPage;
				this.getAccountListByPage();
			},
			async getAccountListByPage() {
				let url = `/account/getAccountListByPage`;
				// 组装分页与排序
				this.accountQueryForm.currentPage = this.currentPage;
				this.accountQueryForm.pageSize = this.pageSize;
				this.accountQueryForm.sortInfo = this.sortInfo;
				let res = await this.ajax(url, this.accountQueryForm, 'POST');
				if (res.success) {
					this.accountList = res.data.list;
					this.total = res.data.total;
				}
			},
		},
		mounted() {
			this.getAccountListByPage()
		}
	}
</script>
<style>

</style>
